@import "../../variables/x-button.scss";
.aui-btn{
	position: relative;
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 14px;
	padding-right: 14px;
	font-size: $auiBtnFontSize;
	text-align: center;
	text-decoration: none;
	color: $auiBtnFontColor;
	line-height: $auiBtnHeight / $auiBtnFontSize;
	border-radius: $auiBtnBorderRadius;
	overflow: hidden;
	background-color: $auiBtnPrimaryBg;
	white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    border-width: 0;
    -webkit-appearance: none;
    outline: 0;
	&:focus {
        outline: 0;
    }
	&:active{
		transform: scale(1.02);
	}
	&:after {
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid rgba(0, 0, 0, .2);
        transform: scale(.5);
        transform-origin: 0 0;
        border-radius: $auiBtnBorderRadius*2;
        pointer-events: none;
    }
	&.aui-btn--inline, &.aui-btn--mini {
        width: auto;
    }
    
    &.weui_btn--inline {
        display: inline-block;
    }

	&--mini {
        line-height: $auiBtnMiniHeight;
        font-size: $auiBtnMiniFontSize;
        padding: 0 .75em;
        display: inline-block;
    }

	&--default{
		// color: $auiBtnDefaultFontColor;
		color: #fff;
		background-color: #c3c3c3;
		// background-color: $auiBtnDefaultActiveBg;
		&:not(.aui-btn--disabled):visited {
	        // color: $auiBtnFontColor;
			color: #fff;
	    }
		&:not(.aui-btn--disabled):active{
			// color: $auiBtnDefaultActiveFontColor;
			color: #fff;
			// background-color: $auiBtnDefaultActiveBg;
			background-color: #c3c3c3;
		}
		&--plain{
			color: $auiBtnDefaultBg;
		    border: 1px solid $auiBtnDefaultBg;
		    border-width: 1px;
	        background-color: transparent;
			&:not(.aui-btn--disabled):active {
		        border-color: $auiBtnDefaultActiveBg;
	        	background-color: transparent;
		    }
		    &:after {
		        border-width: 0;
		    }
		}
	}
	&--primary{
		// background-color: $auiBtnPrimaryBg;
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f5c34c), color-stop(100%,#ff725f));
		&:not(.aui-btn--disabled):visited {
	        color: $auiBtnFontColor;
	    }
		&:not(.aui-btn--disabled):active{
			// background-color: $auiBtnPrimaryActiveBg;
    		background: #ff725f;
			transform: none;
		}
		&--plain{
			color: $auiBtnPrimaryBg;
		    border: 1px solid $auiBtnPrimaryBg;
		   	border-width: 1px;
	        background-color: transparent;
		    &:not(.aui-btn--disabled):active {
		        border-color: $auiBtnPrimaryActiveBg;
		        background-color: transparent;
		    }
		    &:after {
		        border-width: 0;
		    }
		}
	}

	&--warn{
		background-color: $auiBtnWarnBg;
		&:not(.aui-btn--disabled):visited {
	        color: $auiBtnFontColor;
	    }
		&:not(.aui-btn--disabled):active{
			background-color: $auiBtnWarnActiveBg;
			transform: none;
		}
		&--plain{
			color: $auiBtnWarnBg;
		    border: 1px solid $auiBtnWarnBg;
		   	border-width: 1px;
	        background-color: transparent;
		    &:not(.aui-btn--disabled):active {
		        border-color: $auiBtnWarnActiveBg;
		        background-color: transparent;
		    }
		    &:after {
		        border-width: 0;
		    }
		}	
	}

	&--disabled{
		color: $auiBtnDisabledFontColor;
		&:active{
			transform: none;
		}
		&--plain{
			color: $auiBtnDisabledFontColor;
		    border: 1px solid $auiBtnDisabledFontColor;
		   	border-width: 1px;
	        background-color: transparent;
		    &:not(.aui-btn--disabled):active {
		        background-color: transparent;
		    }
		    &:after {
		        border-width: 0;
		    }
		}	
	}
}